<template>
  <div class="agentList divBox">
    <el-card class="box-card" shadow="hover">
      <template class="clearfix" v-slot:header>
        <el-button size="small" type="primary" icon="el-icon-plus"
          @click="addActivitie">添加用户</el-button>
        <el-tooltip :disabled="!disabled" class="ml10" effect="dark" content="本页至少选择一项"
          placement="bottom">
          <div style="display: inline-block">
            <el-button :disabled="disabled" size="small" icon="el-icon-s-release" type="primary"
              @click="openCompany()">批量绑定公司</el-button>
          </div>
        </el-tooltip>
        <el-tooltip :disabled="!disabled" class="ml10" effect="dark" content="本页至少选择一项"
          placement="bottom">
          <div style="display: inline-block">
            <el-button :disabled="disabled" size="small" icon="el-icon-s-claim" type="primary"
              @click="unBindCompany()">批量解绑公司</el-button>
          </div>
        </el-tooltip>
      </template>
      <el-table v-loading="disLoading" :data="tableUsersList" style="width: 100%" size="mini"
        class="table" @selection-change="handleSelectionChange">
        <el-table-column type="selection" min-width="55"></el-table-column>
        <el-table-column prop="id" label="ID" align="center" min-width="60"></el-table-column>
        <el-table-column prop="registerFrom" label="注册渠道" align="center"
          min-width="80"></el-table-column>
        <el-table-column prop="realName" label="真实姓名" align="center"
          min-width="120"></el-table-column>
        <el-table-column prop="mobile" label="电话" align="center" min-width="120"></el-table-column>
        <el-table-column prop="nickName" label="昵称" align="center"
          min-width="120"></el-table-column>
        <el-table-column label="头像" min-width="80">
          <template slot-scope="{ row }">
            <div class="demo-image__preview">
              <div class="tabBox_img" v-viewer>
                <img v-lazy="$uploadURL(row.headImage)" />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="gender" label="性别">
          <template slot-scope="scope">
            <div>{{ scope.row.gender | genderFilter }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址" align="center" min-width="160"></el-table-column>
        <el-table-column prop="isShow" label="账号状态" align="center" min-width="120">
          <template slot-scope="{ row }">
            <div>
              {{ row.isShow ? "禁用" : "启用" }}
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="230" fixed="right" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="edit(row.id)">
              编辑
            </el-button>
            <el-divider direction="vertical" />
            <el-button type="text" size="small" @click="openCompany(row.id)">绑定公司</el-button>
            <el-divider direction="vertical" />
            <el-button type="text" size="small" @click="unBindCompany(row.id)">解绑公司</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="spreadBox">
        <pagination v-show="pagination.total > 0" :total="pagination.total"
          :page.sync="pagination.page" :limit.sync="pagination.limit" :page-sizes="[10, 20, 30, 50]"
          @pagination="replyChange" />
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import {
  getUsersListApi,
  putUnBindCompanyApi,
  putBindCompanyApi,
} from '@/api/users';

export default {
  name: 'userList',
  filters: {
    genderFilter(key) {
      const gender = {
        0: '男',
        1: '女',
        2: '未知',
      };
      return gender[key];
    },
  },
  data() {
    return {
      grid: {
        xl: 5,
        lg: 7,
        md: 12,
        sm: 12,
        xs: 24,
      },
      disForm: {
        keyword: '',
        roleId: '',
      },
      pagination: {
        page: 1,
        limit: 10,
        total: 100,
      },
      tableUsersList: [],
      del: [],
      disLoading: false,
      disabled: true,
      companyId: '',
    };
  },
  beforeCreate() {},
  mounted() {
    this.getUsersList();
  },
  computed: {
    ...mapGetters(['customRouter', 'selectedId']),
  },
  methods: {
    // 添加活动
    addActivitie() {
      this.$router.push({ path: `${this.customRouter}/users/users_add` });
    },
    /**
     * 行选中时
     */
    handleSelectionChange(val) {
      this.$set(
        this,
        'del',
        val.map((item) => item.id)
      );
      console.log(this.del);
      if (val.length > 0) this.$set(this, 'disabled', false);
      else this.$set(this, 'disabled', true);
    },
    /**
     * 编辑活动
     * id
     */
    edit(id) {
      this.$router.push({
        path: `${this.customRouter}/users/users_add`,
        query: { id: id },
      });
    },

    /**
     * 是否显示活动
     */
    patchEditMobile(id, mobile) {
      console.log('>>>>？', id, mobile);
      let value;
      let ids;
      if (id) {
        value = mobile;
        ids = id;
      } else {
        value = mobile;
        ids = !this.del.length ? '' : `${this.del.join()}`;
      }
      console.log('value', value);
      console.log('ids', ids);
      patchUsersMobileApi(
        this.selectedId,
        [
          {
            op: 'replace',
            path: '/mobile',
            value: value,
          },
        ],
        ids
      )
        .then((res) => {
          console.log('修改成功', res);
          this.getUsersList();
          this.$message.success('修改成功');
        })
        .catch(() => {
          this.$message.error('修改失败');
        });
    },
    /**
     * 获取公司列表
     */
    getUsersList() {
      getUsersListApi(this.selectedId, {
        pageNumber: this.pagination.page,
        pageSize: this.pagination.limit,
        orderby: 'Id desc',
        isShow: -1,
        isDel: 0,
        registerFrom: -1,
        companyId: -1,
        isPrimary: -1,
      }).then((res) => {
        console.log('>>>>>>>>>>>>', res);
        this.$set(this, 'tableUsersList', res.data);
        this.pagination.total = res.head ? res.head.totalCount : 0;
      });
    },
    replyChange(reply) {
      this.$set(this.pagination, 'page', reply.page);
      this.$set(this.pagination, 'limit', reply.limit);
      console.log('pagination', this.pagination);
      this.getUsersList();
    },
    /**
     * 获取公司id
     * id=0是绑定
     * id=1是解绑
     */
    openCompany(row) {
      const _this = this;
      _this.$modal({
        componentProps: {
          editRow: row,
        },
        component: (resolve) => require(['./components/companyList'], resolve),
        props: {
          title: '编辑',
          customClass: 'zdyDialogCls editAgentDialogCls',
          width: '100%',
          closeOnClickModal: false,
        },
        methods: {
          getCompanyList(data) {
            let row = data.editRow ? data.editRow : `${_this.del.join()}`;
            _this.bindCompany(data.id, row);
            console.log('_this.editPersonnelForm.activityId》》', data);
          },
        },
      });
    },
    /**
     * 绑定公司
     */
    bindCompany(id, row) {
      console.log('绑定公司', id, row);
      putBindCompanyApi(this.selectedId, row, {
        CompanyId: id,
      })
        .then((res) => {
          console.log('修改成功', res);
          this.getUsersList();
          this.$message.success('修改成功');
        })
        .catch(() => {
          this.$message.error('修改失败');
        });
    },
    /**
     * 解绑公司
     */
    unBindCompany(row) {
      let rows = row ? row : `${this.del.join()}`;
      putUnBindCompanyApi(this.selectedId, rows)
        .then((res) => {
          console.log('解绑成功', res);
          this.getUsersList();
          this.$message.success('解绑成功');
        })
        .catch(() => {
          this.$message.error('解绑失败');
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.agentList {
  .taoBox_img {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
    }
  }
  .taoBoxs_img {
    // width: 36px;
    // height: 36px;
    border-radius: 4px;
    // overflow: hidden;
    cursor: pointer;

    img {
      margin-right: 5px;
      width: 36px;
      height: 36px;
    }
    video {
      margin-right: 5px;
      width: 50px;
      height: 50px;
    }
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
    font-size: 12px;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }
}
</style>

<style lang="scss">
.el-dialog.cusDialogCls,
.el-dialog.editAgentDialogCls {
  max-width: 960px;
}

.el-dialog.promotionOrderDialogCls {
  max-width: 900px;
}
</style>